<template>
  <el-container>
    <el-form ref="form" class="commercial" label-width="120px">
      <h3>商户信息</h3>
      <el-form-item label="商户名称:" style="width:23%; float:left;">
        {{megss.abbreviationName}}
      </el-form-item>
      <el-form-item label="商户联系人:" style="width:23%; float:left;">
        {{megss.contactsName}}
      </el-form-item>
      <el-form-item label="开户姓名:" style="width:23%; float:left;">
        {{megss.name}}
      </el-form-item>
      <el-form-item label="商户号:" style="width:23%; float:left;">
        {{megss.code}}
      </el-form-item>
      <el-form-item label="联系人电话:" style="width:23%; float:left;">
        {{megss.mobile}}
      </el-form-item>
      <el-form-item label="身份证号:" style="width:23%; float:left;">
        {{megss.contactsCardCode}}
      </el-form-item>
      <el-form-item label="行业类别:" style="width:23%; float:left;">
        {{megss.categoryName}}
      </el-form-item>
      <el-form-item label="联系人邮箱:" style="width:23%; float:left;">
        {{megss.contactsEmaill}}
      </el-form-item>
      <el-form-item label="银行卡号:" style="width:23%; float:left;">
        {{megss.bankAccountCode}}
      </el-form-item>
      <el-form-item label="入网时间:" style="width:23%; float:left;">
        {{megss.submitStartTime}}
      </el-form-item>
      <el-form-item label="地址:" style="width:23%; float:left;">
        {{megss.addressName}}
      </el-form-item>
    </el-form>

    <div class="merchat">
      <p class="merchat-title">终端信息</p>

      <div class="merchat-content">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSysUser">新增</el-button>

        <el-main>
          <el-table v-loading="loading" :data="pageTableData" border size="small" max-height="700">
            <el-table-column label="终端号" prop="terminalId" header-align="center" align="center" width="80" />
            <el-table-column label="所属门店" prop="terminalName" header-align="center" align="center" min-width="140" />
            <el-table-column label="二维码" prop="createUser" header-align="center" align="center" min-width="100" />

            <el-table-column label="时间" prop="createTime" header-align="center" align="center" min-width="140" />
            <el-table-column label="是否开通" prop="status" header-align="center" align="center" width="120">
              <template slot-scope="scope">
                <el-switch
                  disabled
                  v-model="scope.row.deleted == 0 ? true : false"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作"  header-align="center" align="center" min-width="180">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  icon="el-icon-edit"
                  @click="updateSysUser(scope.row)"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </div>
    </div>
    <el-footer style="text-align: right">
      <el-pagination
        :current-page="queryData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryData.totalCount"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
      />
    </el-footer>

    <!-- 新增终端 -->
    <el-dialog
      v-loading="sysUser.loading"
      :title="sysUser.title"
      :visible.sync="sysUser.show"
      top="15vh"
      width="420px"
      :before-close="handleClose"
    >
      <el-form
        ref="sysUserForm"
        :model="sysUser.form"
        :rules="rules"
        size="small"
        label-width="80px"
        style="width: 350px;"
      >
        <el-form-item label="终端名称" prop="terminalName">
          <el-input v-model="sysUser.form.terminalName" placeholder="请输入总端名称" />
        </el-form-item>
        <el-form-item label="所属门店" prop="storeCode">
          <!-- <el-input v-model="sysUser.form.storeCode" placeholder="请输入所属门店的编码" /> -->
          <el-select v-model="sysUser.form.storeCode"  placeholder="请选择" style="width: 270px;">
            <el-option
              v-for="item in roleList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否开通" v-if="sysUser.form.id">
          <el-switch
            v-model="sysUser.form.deleted"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="removeGo">取 消</el-button>
        <el-button size="small" type="primary" @click="submitSysUser('sysUserForm')">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>

</template>

<script>
import { sysAjax } from 'Ajax'
import { getAuthInfo } from '@/utils/validate'
export default {
  name: 'SysUser',
  data() {
    return {
      loading: false,
      authInfo: JSON.parse(getAuthInfo()),
      queryData: {
        pageNum: 1,
        pageSize: 10,
        totalCount: 0
      },
      pageTableData: [],
      statusMap: { false: '否', true: '是' },
      rules: {
        terminalName: [{ required: true, message: '终端不能为空' }],
        storeCode: [{ required: true, message: '所属门店不能为空' }],
      },
      sysUser: {
        title: '新增',
        show: false,
        loading: false,
        form: {}
      },
      roleList: [],
      megss: {}
    }
  },
  created() {
    this.queryPageList()
    sysAjax.selectMerchantInfo({}).then(data => {
      this.megss = data
    })
     sysAjax.selectMerchantShop({}).then(data => {
       this.roleList = data.list
    })
  },
  methods: {
    reset(formName) {
      this.$refs[formName].resetFields()
      this.queryPageList()
    },
    queryPageList() {
      this.loading = true
      sysAjax.selectMerchantTerminal(this.queryData).then(response => {
        this.pageTableData = response.list
        this.queryData.pageNum = response.currPage
        this.queryData.pageSize = response.pageSize
        this.queryData.totalCount = response.totalCount
        this.loading = false
      })
    },
    pageChange(pageNo, pageSize) {
      this.queryData.pageNum = pageNo
      this.queryData.pageSize = pageSize
      this.queryPageList()
    },
    pageSizeChange(val) {
      this.queryData.pageSize = val
      this.queryPageList()
    },
    pageCurrentChange(val) {
      this.queryData.pageNum = val
      this.queryPageList()
    },
    addSysUser() {
      this.sysUser.show = true
      this.sysUser = {
        title: '新增',
        show: true,
        loading: false,
        form: {
          status: true
        }
      }
    },
    updateSysUser(row) {
      row.deleted = row.deleted == 0 ? true : false
      delete row.createTime
      this.sysUser = {
        title: '编辑',
        show: true,
        loading: false,
        form: row
      }
      this.sysUser.show = true
    },
    removeGo() {
      this.timer = setTimeout(() => {
        this.sysUser = {
          title: '新增',
          show: false,
          loading: false,
          form: {}
        }
        this.queryPageList()
      }, 500)
    },
    submitSysUser() {
      this.$refs.sysUserForm.validate((valid) => {
        if (valid) {
          this.sysUser.loading = true
          if (this.sysUser.form.id === undefined) {
            const params = {
              'deleted': 0,
              'terminalName': this.sysUser.form.terminalName,
              'storeCode': this.sysUser.form.storeCode,
              // 'storeCode': '100081',
              // 'merchantNo': this.authInfo.userId,
              'merchantNo': '852104816000329',
            }
            sysAjax.saveMerchantTerminal(params).then(() => {
              this.msgSuccess('添加用户成功')
              // 设置延迟执行
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          } else {
            this.sysUser.form.deleted = this.sysUser.form.deleted ? 0 : 1
            sysAjax.saveMerchantTerminal(this.sysUser.form).then(() => {
              this.msgSuccess('修改成功')
              this.timer = setTimeout(() => {
                this.sysUser = {
                  title: '新增',
                  show: false,
                  loading: false,
                  form: {}
                }
                this.queryPageList()
              }, 500)
            }).catch(() => {
              this.sysUser.loading = false
            })
          }
        }
      })
    },
    statusChange(row) {
      const action = row.status ? '禁用' : '启用'
      this.$confirm('是否确认' + action + '账号【' + row.username + '】?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sysAjax.sysUserStatusChange({ 'id': row.id }).then(() => {
          this.msgSuccess(action + '成功')
          this.queryPageList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped lang='scss'>
/deep/ .el-form-item__label {
  font-size: 13px;
  font-weight: 500;
}
.commercial{
  h3{
    line-height: 30px;
    margin: 0;
  }
}
</style>
